div#one{
	display: flex;
	height: 150px;
	align-items: center;
}

div#two {
	display: inline-flex;
	flex-basis: 80px;
}

div#one > *, div#two > *{
	border: 1px solid;
	Background: #AAA;
	height: 50px;
}

div#one > *{
}

div#one, div#two {
	border: 1px dashed;
	Background: silver;
	margin: 10px 0
}

div#one p, div#two p {
	margin: 0;
}


nav {
	display: flex;
	flex-direction: column;
}

a {
	margin: 5px;
	padding: 5px 15px;
	border-radius: 3px;
	background-color: #ddaa00;
	text-decoration: none;
	color: #ffffff;
}

a:hover, a:focus, a:active {
	background-color: #ffcc22;
	color: black;
	text-decoration: underline;
}

ul {
	display: inline-flex;
	flex-direction: column;
}

li {
	margin: 3px; 10px;
	padding: 5px; 10px;
	border-radius: 5px;
}

li:hover {
	background-color: #ffcc22;
}

#grow{
	display: flex;
	background-color: #AAA;
}

#grow > *{
	width: 100px;
	height: 100px;
	padding: 10px;
	margin: 5px;
	background-color: Gray;
	border-radius: 10px;
}

#grow-child-1, #grow-child-3{
	flex-grow: 1;
}

#shrink{
	display: flex;
	background-color: #AAA;
}

#shrink > * {
	width: 500px;
	height: 100px;
	padding: 10px;
	margin: 5px;
	background-color: Gray;
	border-radius: 10px;
	flex-shrink: 0;
}

#shrink-child-1, #shrink-child-3{
	flex-shrink: 3;
}

